<template>
  <a-layout id="components-layout-demo-fixed">
    <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
      <router-link class="logo" to="/">
        <img src="@/assets/img/logo.png" alt="">
      </router-link>
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['TinyMCE']"
        :selectedKeys="selectKeys"
        :style="{ lineHeight: '64px' }"
        @select="menuItemSelected"
        :getPopupContainer="getPopupContainer"
      >
        <template v-for="item in list">
          <a-menu-item v-if="!item.children" :key="item.key">
            <a-icon type="pie-chart"/>
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :menu-info="item" :key="item.key"/>
        </template>
      </a-menu>
    </a-layout-header>
    <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
      </a-breadcrumb>
      <div
        :style="{
          background: '#fff',
          padding: '24px',
          minHeight: mainHeight + 'px'
        }"
      >
        <router-view/>
      </div>
    </a-layout-content>
    <a-layout-footer :style="{ textAlign: 'center' }">
      Vue-Dz-Admin ©2020 Created by <a href="https://blog.csdn.net/dizuncainiao" target="_blank">帝尊菜鸟</a>
    </a-layout-footer>
  </a-layout>
</template>

<script>
import SubMenu from '@/components/SubMenu'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Home',
  components: { SubMenu },
  data () {
    return {
      mainHeight: 0,
      list: [
        {
          key: 'AntDesign',
          title: 'AntV 组件',
          children: [
            {
              key: 'TableToolsDemo',
              title: 'table 自定义工具栏'
            }
          ]
        }, {
          key: 'ArcGis',
          title: 'ArcGis For Js',
          children: [
            {
              key: 'ArcGisLine',
              title: 'ArcGis画路径'
            },
            {
              key: 'ArcGisPoint',
              title: 'ArcGis画点'
            },
            {
              key: 'ArcGisSwitchMap',
              title: 'ArcGis切换底图'
            },
            {
              key: 'ArcGisComponent',
              title: 'ArcGis地图组件封装'
            }
          ]
        }, {
          key: 'G2Plot',
          title: 'G2Plot Demo',
          children: [
            {
              key: 'RadarChart',
              title: '雷达图切换'
            },
            {
              key: 'RadarChart2',
              title: '雷达图'
            }
          ]
        }, {
          key: 'DzMindMap',
          title: 'dz-mind-map示例'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      selectKeys: state => state.selectKeys
    })
  },
  created () {
    this.mainHeight = document.documentElement.clientHeight - 186
    this.setLayoutHeight(this.mainHeight)
  },
  methods: {
    ...mapMutations(['setLayoutHeight']),
    getPopupContainer (el) {
      return el
    },
    // 选中菜单项
    menuItemSelected ({ key, selectedKeys }) {
      this.$store.commit('setSelectKeys', selectedKeys)
      this.$router.push({ name: key })
    }
  }
}
</script>

<style lang="less">
#components-layout-demo-fixed .logo {
  display: grid;
  place-items: center;
  width: 60px;
  height: 100%;
  margin: 0 24px 0 0;
  float: left;

  &:hover {
    > img {
      animation: rotateImg 6s ease-in-out infinite;
    }
  }

  > img {
    height: 40px;
  }
}

@keyframes rotateImg {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3600deg);
  }

}
</style>
